<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人主页</title>
    <style>
      #homepage{
        width: 986px;
        height: 573px;
        border:solid 0 red;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
        background-image:url("sakula.png");
        background-size: 986px 573px;
      }
      #homepage>div:nth-child(1){
          margin: 0 auto;
          width: 203px;
          height: 203px;
      }
      img{
        width: 200px;
        height: 200px;
        border-radius: 50%;
        border:solid 3px #ffffff;
        margin: 20px auto;
        box-shadow: 2px 2px 2px #666666;
      }
      .bottom1{
        width:288px;
        height: 79px;
        position: absolute;
        bottom: 48px;
        left: 30px;
        background: #3ea3d4;
        float: right;
        text-align: center;
        line-height: 79px;
        color: white;
        outline: none;
        border: none;
      }
      .bottom2{
        width:288px;
        height: 79px;
        position: absolute;
        bottom: 48px;
        left: 350px;
        background: #03b61b;
        float: right;
        text-align: center;
        line-height: 79px;
        color: white;
        outline: none;
        border: none;
      }
      .bottom3{
        width:288px;
        height: 79px;
        position: absolute;
        bottom: 48px;
        left: 670px;
        background: #bf5f69;
        float: right;
        text-align: center;
        line-height: 79px;
        color: white;
        outline: none;
        border: none;
      }
      .name{
          width: 100%;
          text-align: center;
      }
      .brief{
          width: 100%;
          text-align: center;
      }
      ul{
          margin: 0;
          padding: 0;
      }
      ul>li{
          width: 100%;
          list-style: none;
          margin: 0;
          padding: 0;
          font-size: 20px;
          padding-top: 10px;
          padding-bottom: 5px;
          font-family: "Segoe UI", system-ui, sans-serif;
      }
    </style>
</head>
<body>
<div id="homepage">
  <div><img src="temp.png" alt="找不到该图片"></div>
  <div class="name"><h3>羽月希</h3></div>
  <div class="brief">
      <ul>
          <li>web前端工程师</li>
          <li>男,北京市</li>
          <li>这位同学很懒,什么都没有留下--!</li>
      </ul>
  </div>
    <input type="button" value="访问主页" class="bottom1">
<!--  <div class="bottom1">访问主页</div>-->
    <input type="button" value="发送消息" class="bottom2">
    <input type="button" value="删除好友" class="bottom3">
<!--  <div class="bottom2">发送消息</div>-->
<!--  <div class="bottom3">删除好友</div>-->
</div>
</body>
</html>